@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <h3>我的预定</h3>

            @if($orders->total() === 0)
                <h1 class="text-info">您没有订单信息</h1>
            @else
                <table class="table table-striped table-hover">
                    <tr>
                        <th scope="col">订单号</th>
                        <th scope="col">下单日期</th>
                        <th scope="col">房间类型</th>
                        <th scope="col">预计入住日期</th>
                        <th scope="col">预计退房日期</th>
                        <th scope="col">总计</th>
                        <th scope="col">已支付</th>
                        <th scope="col">状态</th>
                        <th scope="col">操作</th>
                    </tr>
                    @foreach($orders as $order)
                    <tr>
                        <th scope="row">{{ $order->id }}</th>
                        <td>{{ $order->created_at }}</td>
                        <td>{{ $order->availability->room_type->name }}</td>
                        <td>{{ $order->availability->from }}</td>
                        <td>{{ $order->availability->to }}</td>
                        <td>{{ $order->payment->total }}</td>
                        <td>{{ $order->payment->paid }}</td>
                        <td>
                        @if ($order->cancelled == true)
                            已取消
                        @elseif($order->check_in == true)
                            已入住
                        @else
                            等待入住
                        @endif
                        </td>
                        <td>
                        @if ($order->availability->is_valid == true)
                            <a href="{{ route('changeOrder', ['id' => $order->id]) }}" role="button" class="btn btn-primary">修改</a>
                            <a data-href="{{ route('deleteOrder', ['id' => $order->id]) }}"
                               role="button"
                               class="btn btn-danger"
                               data-toggle="modal" data-target="#confirm-delete"
                            >
                                取消
                            </a>
                        @else
                            <a data-href="{{ route('deleteOrder', ['id' => $order->id]) }}"
                               role="button"
                               class="btn btn-danger"
                               data-toggle="modal" data-target="#confirm-delete"
                            >
                                删除
                                <span class="fa fa-trash-alt"></span>
                            </a>
                        @endif
                        </td>
                    </tr>
                    @endforeach
                </table>
                {{ $orders->links() }}
                {{--  delete modal --}}
                <div class="row">
                    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">警告</h5>
                                </div>
                                <div class="modal-body">
                                    确认删除/取消该预定吗?
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <a class="btn btn-danger btn-ok">确定</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection
@section('footerScript')
    @parent
    <script>
        jQuery('#confirm-delete').on('show.bs.modal', function (e){
            jQuery(this).find('.btn-ok').attr('href', jQuery(e.relatedTarget).data('href'));
        });
    </script>
@endsection
